
var MyForm = React.createClass({
    getInitialState: function() {
      return {
		jobName : "",
        email: "",
        description: "",
        city: "hz",
        male: true,
		jobNameError : "", 
        emailError: "",
        introError: ""
      };
    },
	handleJobName : function(e){
	  var value = e.target.value;
      this.setState({
        jobName: value,
      });
	},
	handleJobGroup : function(e){
	  var value = e.target.value;
      this.setState({
        jobGroup: value,
      });
	},

	handleCronExpression : function(e){
	  var value = e.target.value;
      this.setState({
        cronExpression: value,
      });
	},

    handleEmail: function(e) {
      var value = e.target.value;
      var error = '';
      if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
        error = '请输入正确的Email地址';
      }
      this.setState({
        email: value,
        emailError: error
      });
    },

    handleDescription: function(e) {
      var value = e.target.value;
      var error = "";
      if(value.length < 10) {
        error = "介绍不能少于十个字";
      }
      this.setState({
        description: value,
        descriptionError: error
      });
    },

    handleCity: function(e) {
      var value = e.target.value;
      this.setState({
        city: value,
      });
    },
    handleGender: function(e) {
      var male = !!(e.target.value == 'MALE');
      this.setState({
        male: male
      });
    },
	handleAdd : function(e) {
		e.preventDefault();
		var formData = {
			jobName : this.refs['jobName'].value,
			jobGroup : this.refs['jobGroup'].value,
			cronExpression : this.refs['cronExpression'].value,
			description : this.refs['description'].value,
			email : this.refs['email'].value,
			city : this.refs['city'].value,
			gender : this.refs['gender'].value
		};
		console.log("Data:"+formData);
		$.ajax({
			url : '/addJob',
			type : 'POST',
			dataType : 'json',
			data : formData,
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},
	handleEdit : function(e) {
		e.preventDefault();
		var formData = {
			jobName : this.refs['jobName'].value,
			jobGroup : this.refs['jobGroup'].value,
			cronExpression : this.refs['cronExpression'].value,
			description : this.refs['description'].value,
			email : this.refs['email'].value
		};
		console.log("Data:"+formData);
		$.ajax({
			url : '/Spring-Redis/redis/editJob',
			type : 'POST',
			dataType : 'json',
			data : formData,
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},
	handlePause : function(e) {
		e.preventDefault();
		var formData = {
			jobName : this.refs['jobName'].value,
			jobGroup : this.refs['jobGroup'].value,
			cronExpression : this.refs['cronExpression'].value,
			description : this.refs['description'].value,
			email : this.refs['email'].value
		};
		console.log("Data:"+formData);
		$.ajax({
			url : '/pauseJob',
			type : 'POST',
			dataType : 'json',
			data : formData,
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},
	handleDelete : function(e) {
		e.preventDefault();
		var formData = {
			jobName : this.refs['jobName'].value,
			jobGroup : this.refs['jobGroup'].value,
			cronExpression : this.refs['cronExpression'].value,
			description : this.refs['description'].value,
			email : this.refs['email'].value
		};
		console.log("Data:"+formData);
		$.ajax({
			url : '/deleteJob',
			type : 'POST',
			dataType : 'json',
			data : formData,
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},

	handleResume : function(e){
		e.preventDefault();
		var formData = {
			jobName : this.refs['jobName'].value,
			jobGroup : this.refs['jobGroup'].value,
			cronExpression : this.refs['cronExpression'].value,
			description : this.refs['description'].value,
			email : this.refs['email'].value
		};
		console.log("Data:"+formData);
		$.ajax({
			url : '/Spring-Redis/redis/resumeJob',
			type : 'POST',
			dataType : 'json',
			data : formData,
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},
	
	handleGetAll : function(e){
		$.ajax({
			url : '/getAllJob',
			type : 'POST',
			dataType : 'json',
			data : '',
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},
	
	handleShut : function(e) {
		e.preventDefault();
		var formData = {
			jobName : this.refs['jobName'].value,
			jobGroup : this.refs['jobGroup'].value,
			cronExpression : this.refs['cronExpression'].value,
			description : this.refs['description'].value,
			email : this.refs['email'].value
		};
		console.log("Data:"+formData);
		$.ajax({
			url : '/shutJob',
			type : 'POST',
			dataType : 'json',
			data : formData,
			scriptCharset : 'utf-8',
			success : function(result){
				alert(result);
			}
		});
	},

	handleQueryPath : function(e){
		$.ajax({
			url : '/queryRootPath',
			type : 'POST',
			dataType : 'json',
			data : '',
			scriptCharset : 'utf-8',
			success : function(result){
				this.rootpath = result;
				alert(result+" : "+this.rootpath);
			}
		});
	},
	
    render: function() {
      return (
        <div>
        <p>
          <label htmlFor='jobName'>Job Name:</label>
          <input ref="jobName" type='text' name = 'jobName' value={this.state.jobName} onChange={this.handleJobName} />
          <span>{this.state.jobNameError}</span>
        </p>
        <p>
          <label htmlFor='jobGroup'>Job Group:</label>
          <input ref="jobGroup" type='text' name = 'jobGroup' value={this.state.jobGroup} onChange={this.handleJobGroup} />
          <span>{this.state.jobGroupError}</span>
        </p>
        <p>
          <label htmlFor='cronExpression'>Cron Expression:</label>
          <input ref="cronExpression" type='text' name = 'cronExpression' value={this.state.cronExpression} onChange={this.handleCronExpression} />
          <span>{this.state.cronExpressionError}</span>
        </p>
        <p>
          <label htmlFor='email'>Email:</label>
          <input ref="email" type='text' name='email' id='email' value={this.state.email} onChange={this.handleEmail} />
          <span>{this.state.emailError}</span>
        </p>
        <p>
          <label htmlFor='description'>Description:</label>
          <textarea ref="description" name = 'description' type='text' value={this.state.description} onChange={this.handleDescription} />
          <span>{this.state.descriptionError}</span>
        </p>
        <p>
          <label htmlFor='city'>所在城市:</label>
          <select ref="city" name='city' id='city' value={this.state.city} onChange={this.handleCity}>
            <option value='hz'>北京</option>
            <option value='bj'>上海</option>
            <option value='sh'>西安</option>
          </select>
        </p>
        <p>
          <label>性别:</label>
          <input ref="gender" type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' />
          <input ref="gender" type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' />
        </p>
		<p>
			<input type='button' name='submit' onClick={this.handleAdd} value='Add'></input>
		</p>
		<p>
			<input type='button' name='submit' onClick={this.handleEdit} value='Edit'></input>
		</p>
		<p>
			<input type='button' name='submit' onClick={this.handlePause} value='Pause'></input>
		</p>
		<p>
			<input type='button' name='submit' onClick={this.handleResume} value='Resume'></input>
		</p>
		<p>
			<input type='button' name='submit' onClick={this.handleDelete} value='Delete'></input>
		</p>
		<p>
			<input type='button' name='submit' onClick={this.handleGetAll} value='Get All Job'></input>
		</p>	
		<p>
			<input type='button' name='submit' onClick={this.handleQueryPath} value='Query Path'></input>
		</p>		
		<p>
			<input type='button' name='submit' onClick={this.handleShut} value='Shut Schedule'></input>
		</p>
        </div>
        )
    }
  });

  ReactDOM.render(
    	<MyForm />,
    	document.getElementById("example")
    );